<template lang="pug">
el-table.table-xxs(
  border
  fit
  height="100%"
  :data="tableData"
  :default-sort="{prop: 'recordTime', order: 'descending'}")
  el-table-column(
    v-for="(item, index) of columns"
    :key="index"
    :sort-orders="['descending', 'ascending']"
    v-bind="item")
</template>

<script >
/**
 * @name DefaultMultiInfo 多设备的数据列表
 * @author 陈可嘉
 * @description 多设备的数据列表
 */
import { groupBy, values } from 'lodash'

export default {
  name: 'DefaultMultiInfo',
  props: {
    target: String,
    parameterList: Array,
    devicesData: Array
  },
  computed: {
    tableData () {
      // 把data全部平铺
      const flatData = this.devicesData.reduce((result, device) => {
        const deviceData = device.data.map(item => {
          return {
            ...item,
            siteId: device.siteId + ''
          }
        })
        return [...result, ...deviceData]
      }, [])
      // 把平铺的数据按时间分到一起
      const groupData = values(groupBy(flatData, 'recordTime')).map(data => {
        return data.reduce((result, record) => {
          return {
            ...result,
            [record.siteId]: record[this.target]
          }
        }, {
          recordTime: data[0].recordTime
        })
      })
      // console.log('groupData')
      // console.log(groupData)
      return groupData
    },
    columns () {
      return [
        {
          label: '采集时间',
          prop: 'recordTime',
          sortable: true,
          formatter: (row, column, cellValue, index) => {
            return this.$moment(cellValue, 'x').format('YYYY-MM-DD HH:mm')
          }
        },
        ...this.devicesData.map(({siteName, siteCode, siteId}) => {
          return {
            'render-header': (h) => {
              return h('div', {
                style: {
                  padding: '3px 0',
                  lineHeight: 1.5,
                  display: 'inline-flex'
                }
              }, [siteName, h('br'), siteCode])
            },
            prop: siteId + '',
            sortable: true,
            formatter: (row, column, cellValue, index) => {
              return cellValue ? cellValue.toFixed(3) : '-'
            }
          }
        })
      ]
    }
  }
}
</script>

<style lang="sass" scoped>
.dashboard-info-wrap
  display: flex
  width: calc(100% - 20px)
  height: calc(100% - 20px)
  overflow: hidden
  margin: 10px
  flex-direction: column
  .tab-items
    height: 40px
</style>
